<template>
  <div>
    <el-switch v-bind="$attrs"
               :value="row.status"
               :active-value="1"
               :inactive-value="0"
               :disabled="row.type === 1"
               @change="handleSwitch">
    </el-switch>
  </div>
</template>

<script>
import { role } from "@/api";
export default {
  name: "RoleStatusSwitch",
  inject: ['$table'],
  data () {
    return {
    };
  },
  props: {
    row: {
      type: Object,
      default: () => { }
    },
    preset: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    roleArgs () {
      const { roleId } = this.row;
      return { roleId };
    },
  },
  created () {
  },
  methods: {
    async handleSwitch (value) {
      const enableMessage = "确定启用该角色吗？";
      const disableMessage = "禁用后，用户不能再选该角色，确定禁用吗？";
      const message = 1 === value ? enableMessage : disableMessage;
      await this.$confirm(message, "提示")
        .then(() => {
          if (value === 1) {
            this.enable();
          } else {
            this.disable();
          }
        })
        .catch((error) => {
          console.log("取消操作", error);
        });
    },
    async enable () {
      const response = await role.enable(this.roleArgs);
      if (0 !== response?.code) {
        this.$message({ type: "error", message: response?.message });
        return;
      }
      this.$message({ type: "success", message: "启用成功" });
      this.refresh();
    },
    async disable () {
      const response = await role.disable(this.roleArgs);
      if (0 !== response?.code) {
        this.$message({ type: "error", message: response?.message });
        return;
      }
      this.$message({ type: "success", message: "禁用成功" });
      this.refresh();
    },
    refresh () {
      this.$table.search();
    }
  }
};
</script>

<style></style>
